변수 섀도잉

자바스크립트는 스코프(Scope) 기반 언어입니다. 내부 스코프에서 외부와 같은 이름의 변수를 선언하면 외부 변수가 가려지는 현상이 발생하는데, 이를 **섀도잉(Shadowing)**이라고 합니다.

1️⃣ 핵심 개념: 섀도잉이란?

섀도잉이란, 더 좁은(내부) 스코프에서 선언된 변수가 바깥 스코프의 동일한 이름의 변수를 가리는 현상입니다.

let status = "global";

function run() {
  let status = "local"; // ← '섀도잉'
	console.log(status); // "local"
}

• run() 함수 내부의 status는 외부의 status를 가려서 무시
• 외부 변수는 여전히 살아 있지만, 접근이 안 됨

📌 스코프가 깊어질수록, 더 가까운 스코프의 변수가 우선

2️⃣ 섀도잉의 특징과 위험성

특히 함수형 코드, 중첩된 블록, 콜백 내부에서는 실수로 섀도잉이 발생하기 쉬움

3️⃣ 실무에서 자주 마주치는 패턴

🔹 블록 스코프 안에서

let count = 1;

if (true) {
  let count = 2; // 외부 count 섀도잉
  console.log(count); // 2
}

console.log(count); // 1

🔹 함수 매개변수로 섀도잉

const username = "Alice";

function greet(username) {
  console.log(username); // 매개변수가 외부 변수를 섀도잉
}

🔹 콜백/클로저 안에서

let config = "default";

function load() {
  let config = "loaded"; // 바깥 config를 섀도잉
  setTimeout(() => {
    console.log(config); // "loaded" (외부 config 아님)
  }, 1000);
}

4️⃣ 섀도잉을 피하거나 안전하게 다루는 법

🔹 변수 이름을 명확히 구분

let userName = "Alice";

function handleUser() {
  let currentUserName = "Bob"; // 섀도잉 피함
}

🔹 ESLint 사용: no-shadow

• no-shadow 룰을 켜면 섀도잉 발생 시 경고를 줌

🔹 필요한 경우만 의도적으로 사용

function outer() {
  let mode = "light";

  function inner() {
    let mode = "dark"; // 일부러 섀도잉
    return mode;
  }
}

✔️ 명확한 목적이 있거나 단기적으로 override하려는 경우만 허용